import { Form, Button, Modal, Radio, Checkbox, Row, Col } from 'antd'
import React, { useState, useImperativeHandle } from 'react'

const Signal = ((props) => {
  const [form] = Form.useForm()
  const [showModalOpen, setShowModalOpen] = useState(false)
  const [formData, setFormData] = useState({})
  // 父组件调用打开模态框
  useImperativeHandle(props.onRef, () => {
    return {
      openModalOpen: openModalOpen,
    }
  })
  const openModalOpen = (data) => {
    form.resetFields()
    let obj = {}
    if (!data) {
      form.setFieldsValue({
        tradeDirection: [1, -1]
      })
    } else {
      form.setFieldsValue({
        freqList: data.freqList,
        factorList: data.factorList,
        tradeDirection: data.tradeDirection,
      })
      obj = {
        id: data.id,
        key: data.key,
      }
    }
    setFormData(obj)
    setShowModalOpen(true)
  }
  const configChildModalOpenOk = () => {
    setShowModalOpen(false)
  }
  const configChildModalOpenCancel = () => {
    setShowModalOpen(false)
  }

  const onFinish = async (values) => {
    setShowModalOpen(false)
    props.changeConfigModal({ ...values, ...formData })
  }
  return (
    <>
      <Modal
        forceRender
        key={Math.random()}
        title="添加信号"
        open={showModalOpen}
        onOk={configChildModalOpenOk}
        onCancel={configChildModalOpenCancel}
        footer={[]}
        maskClosable={false}
        width={800}
      >
        <Form
          onFinish={onFinish}
          form={form}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          colon={false}
          style={{
            marginTop: 10,
            minWidth: 700,
          }}
        >
          <Form.Item
            label="预警周期"
            name="freqList"
            rules={[
              {
                required: true,
                message: '请选择预警周期',
              }
            ]}
          >
            <Radio.Group options={props.freqListOpt} />
          </Form.Item>
          {
            props.factorListOpt.length ? <Form.Item
              label="预警因子"
              name="factorList"
              rules={[
                {
                  required: true,
                  message: '请选择预警因子',
                }
              ]}
            >
              <Checkbox.Group style={{ width: '100%' }} >
                <Row>
                  {
                    props.factorListOpt.map(item => (
                      <Col key={item.value} span={8}> <Checkbox value={item.value}>{item.label}</Checkbox> </Col>
                    ))
                  }
                </Row>
              </Checkbox.Group>
            </Form.Item> : ''
          }
          {
            props.tradeDirectionOpt.length ? <Form.Item
              label="交易方向"
              name="tradeDirection"
              rules={[
                {
                  required: true,
                  message: '请选择交易方向',
                }
              ]}
            >
              <Checkbox.Group options={props.tradeDirectionOpt} />
            </Form.Item> : ''
          }
          <Form.Item label=" " style={{ margin: 0 }}>
            <div style={{ textAlign: 'right', marginRight: 50 }}>
              <Button htmlType="submit" type="primary">
                提交
              </Button>
            </div>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
})
export default Signal